<template>
	<view>
		<view v-if="isLoading" style="width: 100%;height: calc(100vh);position: absolute;z-index: 10000;">
			<image src="../../../static/icon/loading.png" style="width: 110rpx;height: 110rpx;" class="loading" mode="">
			</image>
		</view>
		<view @click="closeAny" v-if="showToken||tcdenglu||this.$store.state.Show4"
			style="width: 100%;height: calc(100vh);position: absolute;z-index: 98;"></view>
		<view class="TC" style="position: relative;z-index: 99;" v-if="showToken">
			<view class="box" style="height: 708rpx;">
				<view class="box1">
					<view class="box1-a">
						<view style="color: #9471fe;font-size: 40rpx;line-height: 100rpx;">提示</view>
						<!-- <view style="color: rgb(189,189,189);">祝福视频</view> -->

						<view style="margin-top: -108rpx;color: #9471fe;font-size: 40rpx;">
							登录已过期！请重新登录！
						</view>
						<view class="btnA">
							<button type="button" style="color: #FFFFFF; " @click="cleartoken()">确 认</button>
						</view>
					</view>
					<view class="box2-a">
					</view>
				</view>
			</view>
		</view>

		<view class="TC" style="position: relative;z-index: 99;" v-if="tcdenglu">
			<view class="box" style="height: 708rpx;">
				<view class="box1">
					<view class="box1-a">
						<view style="color: #9471fe;font-size: 40rpx;line-height: 100rpx;margin-bottom: 62rpx;">提示
						</view>
						<!-- <view style="color: rgb(189,189,189);">祝福视频</view> -->

						<view style="margin-top: -108rpx;color: #9471fe;font-size: 40rpx;padding-bottom: 136rpx;">
							确定退出登录吗？
						</view>
						<view class="btnA">
							<button type="button" style="color: #FFFFFF; " @click="truetc()">确 认</button>
						</view>
						<view class="btnA">
							<button type="button" style="color: #FFFFFF; " @click="falsetc()">取消</button>
						</view>
					</view>
					<view class="box2-a">
					</view>
				</view>
			</view>
		</view>


		<view class="TC" style="position: relative;z-index: 99;" v-if="this.$store.state.Show4">
			<view class="box">

				<view class="box1">
					<view class="box1-a">
						<view style="color: rgb(164,133,237);font-size: 24px;">恭喜你合成成功</view>
						<view style="color: rgb(164,133,237);
		font-size: 24px;">获得勋章</view>
						<view>
							<!-- 图片代替 -->
							<image style="width: 720rpx; height:720rpx" src="../../../static/icon/bacnkg1.png" alt="">
								<!-- 视频 -->
								<!-- <video src=""></video> -->
						</view>

						<view class="btnA">
							<button type="button" style="color: #FFFFFF; " @click="closeTC4()">确 认</button>
						</view>
					</view>

				</view>
			</view>
		</view>

		<view class="mack-a" :style=" 'filter: blur('+this.$store.state.mackNum+'px);'">
			<TabBar></TabBar>
			<view class="stall">
				<view class="fixed">
					<BackPage :num="true" name="我 的"></BackPage>
					<view class="myInfo">
						<image style="width: 50rpx;height: 50rpx;    position: absolute;
    top: 6%;
    right: 27rpx;" src="../../../static/icon/tc.png" mode="" @click="zzTclogin()"></image>
						<view class="inImg">
							<image :src="'../../../static/icon/icon1/title.png'" mode=""></image>
						</view>
						<view class="inFrom">
							<view class="fs14">{{username}}</view>
							<!-- <view class="fs12 xc">摊主</view> -->
							<view class="fs12 qian">
								<image src="../../../static/icon/gameicon/Cool.png" mode=""></image>
								<view>
									余额: {{this.cool_shell}}
								</view>
							</view>
							<view class="fs12 qian1">
								<image src="../../../static/icon/gameicon/wtp.png" mode=""></image>

								<view v-if="level==0">
									段位: 学者
								</view>
								<view v-else-if="level==1">
									段位: 力士
								</view>
								<view v-else-if="level==2">
									段位: 法师
								</view>
								<view v-else-if="level==3">
									段位: 工匠
								</view>
								<view v-else-if="level==4">
									段位: 工匠
								</view>
								<!-- <view>身份: 摊主/玩家</view>
							<view>线下身份：文学者</view> -->
							</view>
						</view>
					</view>
					<view class="nav">
						<view style="display: flex;align-items: center;">
							<image style="width: 51rpx;height: 26rpx;" src="../../../static/icon/icon1221/01.png"
								mode=""></image>
							<view class="n-a" @click="CoolCard()">兑换Cool贝卡</view>
							<view class="n-b" @click="DuiHan()">兑换码</view>
							<image style="width: 51rpx;height:26rpx;" src="../../../static/icon/icon1221/02.png"
								mode=""></image>
						</view>
						<!-- <view class="nav-a">
						<image class="im1" src="../../../static/icon/图标5/4.png"></image>
						<view>兑换Cool贝卡</view>
					</view>
					<view class="nav-a">
						<image class="im2" src="../../../static/icon/图标5/5.png"></image>
						<view>合成勋章</view>
					</view>
					<view class="nav-a">
						<image class="im3" src="../../../static/icon/图标5/6.png"></image>
						<view>收付Cool贝卡</view>
					</view>
					<view class="nav-a">
						<image class="im4" src="../../../static/icon/图标5/7.png"></image>
						<view>兑换码</view>
					</view> -->
					</view>
				</view>
				<view class="tabs">
					<view>
						<u-sticky :enable="enable" bgColor="#fff">
							<view>
								<u-tabs ref="tabs" height="40" gutter="30" bar-width="140" bar-height="5"
									:active-item-style="barStyle" :bold="false" :list="list" active-color="#9471fe"
									inactive-color="#D3D5E0" @change="sectionChange" font-size="28" :current="current">
								</u-tabs>
							</view>
							<!-- <u-tabs ref="tabs" :list="list" bar-width="40rpx" active-color="#9471fe"
							inactive-color="#D3D5E0" bar-height="6rpx" @change="sectionChange" font-size="30rpx"
							is-scroll="false" :current="current"></u-tabs> -->
							<!-- <u-tabs-swiper ref="tabs"  :current="current" @change="sectionChange" inactive-color="#D3D5E0" :list="list"  bar-height="6" bar-width="80" active-color="#9471fe" is-scroll="false"></u-tabs-swiper> -->
						</u-sticky>
					</view>


					<!-- <view class="jllist" v-for="(item,index) in xzlist">
						<view class="jl-lf" >
							<view >
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="jl-ri">
						<view >抽奖消耗</view>
						<view >2022/01/06</view>
					</view> -->
				</view>
				<view class="list" v-if="current=='0'">
					<view v-if="coolkalist.length!=0">
						<scroll-view style="height: calc(42.5vh);"   class="scroll-box" scroll-y="true"
							@scroll="scrollEvent">
							<!-- <view style="">
							<image  :src="imgURL+coolkalist[0].picture" mode=""></image>
											<image style="width: 271rpx;
							height: 271rpx;" :src="imgURL+coolkalist[0].picture" mode=""></image>
											<image style="width: 271rpx;
							height: 271rpx;" :src="imgURL+coolkalist[0].picture" mode=""></image>
											<image style="width: 271rpx;
							height: 271rpx;" :src="imgURL+coolkalist[0].picture" mode=""></image>
							<image style="width: 271rpx;
							height: 271rpx;" :src="imgURL+coolkalist[0].picture" mode=""></image>
											<image style="width: 271rpx;
							height: 271rpx;" :src="imgURL+coolkalist[0].picture" mode=""></image>
							<image style="width: 271rpx;
							height: 271rpx;" :src="imgURL+coolkalist[0].picture" mode=""></image>
											<image style="width: 271rpx;
							height: 271rpx;" :src="imgURL+coolkalist[0].picture" mode=""></image>
						</view> -->
							<view
								style="width: 100%;height: 100%;display: flex;flex-wrap: wrap;justify-content: space-evenly;box-sizing: border-box;padding: 0px 80rpx;"
								class="listImg" v-for="(item,indexoi) in coolkalist">

								<image style="width: 271rpx;
							height: 271rpx;margin-bottom: 20rpx;" :src="imgURL+item.picture" mode=""></image>

							</view>
						</scroll-view>
					</view>
					<view v-else style="color: rgb(158, 158, 158);
    font-size: 40rpx;
    margin-top: 80rpx;
    margin-bottom: 60rpx;">
						暂无cool贝卡
					</view>
					<view class="btnA">
						<button style="color: #FFFFFF; " @click="Binding()">挂售NFT</button>
					</view>
				</view>

				<view class="list" v-else-if="current=='1'">
					<view class="grid">
						<view v-for="(item,index) in xzlistone" style="position: relative;">
							<image v-if="!item.pd" style="
							width: 128rpx;
    height: 128rpx;
    position: absolute;
    top: 27%;
    left: 24%;
		    z-index: 9999;" src="../../../static/icon/suo.png" mode=""></image>
							<view :class="'gridchild'+index"
								:style="'background-image:url('+imgURL+item.base_nft_picture+');'+'opacity:'+item.pd">
								<!-- <image :src="'../../../static/icon/图标4/1.png'" mode=""></image> -->

								<text class="text" v-if="item.level==1">专业</text>
								<text class="text" v-else-if="item.level==2">价值</text>
								<text class="text" v-else-if="item.level==3">信赖</text>
								<text class="text" v-else-if="item.level==4">管好每一度</text>
							</view>
						</view>
						<!-- <view class="gridchild1"><text class="text">{{xunzhang.name1}}</text>
					
					</view>
					<view class="gridchild2"><text class="text">{{xunzhang.name2}}</text>
					
					</view>
					<view class="gridchild4"><text class="text">{{xunzhang.name3}}</text>
						
					</view> -->
					</view>
					<view class="btnA">
						<button style="color: #FFFFFF; " @click="Binding()">挂售NFT</button>
					</view>
				</view>

				<view class="list1" style="color: #F7F5FB;background-color: rgb(247,245,251);" v-else-if="current=='2'">
					<view v-if="Coollist.length==0" style="color: #9e9e9e;font-size: 40rpx;margin-top: 80rpx;">暂无记录
					</view>
					
					<!-- refresher-default-style="black" :refresher-triggered="true"
					refresher-background="rgb(241,239,244)" refresher-enabled @refresherrefresh="xlshi" -->
					<scroll-view v-else id="a1" style="height: calc(50vh);
					width: 100%;
  float: right;" 
					 lower-threshold="0" 
					 @scroll="scrollEvent"
					@scrolltolower="pageSizeo":scroll-top="weizhi" class="scroll-box" scroll-y="true"
						>
						<view class="jllist" v-for="(item,index) in Coollist">
							<view class="jl-lf">
								<image v-if="item.const_type==201" src="../../../static/icon/gameicon/000.png" mode="">
								</image>
								<image v-else src="../../../static/icon/gameicon/001.png" mode=""></image>
								<view v-if="item.const_type==201"
									:style="'color:rgb(172,51,193);font-size: 52rpx;margin-left: 44rpx;'">
									<text>+</text>{{item.amout}}
								</view>
								<view v-else :style="'color:rgb(148,113,254);font-size: 52rpx;margin-left: 44rpx;'">
									{{item.amout}}
								</view>
							</view>
							<view class="jl-ri" v-if="item.const_type==201">
								<view style="color:rgb(251,127,243)" class="fs18">{{item.remark}}</view>
								<view style="color:rgb(215,200,249)">{{item.create_time | formatDate('-')}}</view>
							</view>
							<view class="jl-ri" v-else>
								<view style="color:rgb(172,51,193)" class="fs18">{{item.remark}}</view>
								<view style="color:rgb(215,200,249)">{{item.create_time | formatDate('-')}}</view>
							</view>
						</view>
					</scroll-view>
					<!-- <view class="jllist">
						<view class="jl-lf">
							<image src="../../../static/icon/图标2/Cool贝消耗.png" mode=""></image>
							<view style="color: rgb(164,133,237);font-size: 52rpx;margin-left: 12px;">+20</view>
						</view>
						<view class="jl-ri">
							<view style="color: rgb(245,109,160);font-size: 36rpx;">抽奖消耗</view>
							<view style="color:rgb(215,200,249)">2022/01/06</view>
						</view> -->
				</view>
				<view class="list1" style=" color: #F7F5FB;background-color: rgb(247,245,251);"
					v-else-if="current=='3'">
					<view v-if="medielist.length==0" style="color: #9e9e9e;font-size: 40rpx;margin-top: 80rpx;">暂无记录
					</view>
					
					<scroll-view v-else @scroll="scrollEvent" style="height: calc(49.5vh);width: 100%;position: fixed;" lower-threshold="0" @scrolltolower="pageSizeo1" :scroll-top="weizhi3" class="scroll-box" scroll-y="true"
						>
						<!--可视区域里所有数据的渲染区域-->
						<!-- <view
							:style="{width:'100%' ,position: 'absolute', top: top + 'px',display:'flex',flexDirection: 'column',alignItems:'center'}"> -->
						<!--单条数据渲染区域-->
						<view class="jllist1" style="height: 132rpx; margin: 20rpx;" v-for="(item,index) in medielist">

							<view class="jl-lf" v-if="index==0"
								style="border-radius: 12rpx;background-color: rgb(254,107,160);">
								<view class="lf">
									<view style="color: #fff; width: 96rpx;text-align: center;font-size: 32rpx;">
										{{item.nft.name}}
									</view>
								</view>
							</view>
							<view class="jl-lf" v-else-if="index%2==0"
								style="border-radius: 12rpx;background-color: rgb(254,201,140);">
								<view class="lf">
									<view style="color: #fff; width: 96rpx;text-align: center;font-size: 32rpx;">
										{{item.nft.name}}
									</view>
								</view>
							</view>
							<view class="jl-lf" v-else-if="index%3==0"
								style="border-radius: 12rpx;background-color: rgb(200,133,255);">
								<view class="lf">
									<view style="color: #fff; width: 96rpx;text-align: center;font-size: 32rpx;">
										{{item.nft.name}}
									</view>
								</view>
							</view>
							<view class="jl-lf" v-else style="border-radius: 12rpx;background-color: rgb(164,133,237);">
								<view class="lf">
									<view style="color: #fff; width: 96rpx;text-align: center;font-size: 32rpx;">
										{{item.nft.name}}
									</view>
								</view>
							</view>
							<view class="jl-ri" style="margin-left: 68rpx;
					    width: 452rpx;" v-if="index==0">
								<view style="text-align: center;width: 292rpx;">
									<view class="fs15" style="color: rgb(164,133,237);">{{item.remark+ item.amout}}
									</view>
									<view style=" font-size:30rpx;color: rgb(245,106,158); ">{{item.nft.remark}}</view>
								</view>
								<view style="color: rgb(217,217,217)">{{item.create_time | formatDate('-')}}</view>
							</view>
							<view class="jl-ri" style="margin-left: 68rpx;
					    width: 452rpx;" v-else-if="index%2==0">
								<view style="text-align: center;width: 292rpx;">
									<view class="fs15" style="color: rgb(200,133,255);">{{item.remark+ item.amout}}
									</view>
									<view style=" font-size:30rpx;color: rgb(254,201,140); ">{{item.nft.remark}}</view>
								</view>
								<view style="color: rgb(217,217,217)">{{item.create_time | formatDate('-')}}</view>
							</view>
							<view class="jl-ri" style="margin-left: 68rpx;
					    width: 452rpx;" v-else-if="index%3==0">
								<view style="text-align: center;width: 292rpx;">
									<view class="fs15" style="color: rgb(207,145,255);">{{item.remark + item.amout}}
									</view>
									<view style=" font-size:30rpx;color: rgb(168,139,238); ">{{item.nft.remark}}</view>
								</view>
								<view style="color: rgb(217,217,217)">{{item.create_time | formatDate('-')}}</view>
							</view>
							<view class="jl-ri" style="margin-left: 68rpx;
					    width: 452rpx;" v-else>
								<view style="text-align: center;width: 292rpx;">
									<view class="fs15" style="color: rgb(254,201,140);">{{item.remark+ item.amout}}
									</view>
									<view style=" font-size:30rpx;color: rgb(164,133,237); ">{{item.nft.remark}}</view>
								</view>
								<view style="color: rgb(217,217,217)">{{item.create_time | formatDate('-')}}</view>
							</view>
						</view>
						<!-- </view> -->
					</scroll-view>

					<!-- <view class="jllist">
						<view class="jl-lf">
							<image src="../../../static/icon/图标2/Cool贝消耗.png" mode=""></image>
							<view style="color: rgb(164,133,237);font-size: 52rpx;margin-left: 12px;">+20</view>
						</view>
						<view class="jl-ri">
							<view style="color: rgb(245,109,160);font-size: 36rpx;">抽奖消耗</view>
							<view style="color:rgb(215,200,249)">2022/01/06</view>
						</view> -->
				</view>
			</view>


		</view>
	</view>
	</view>

	</view>
</template>

<script>
	import uniRequest from '@/until/uni-request.js'
	import BackPage from '../../../components/questionMark.vue'
	import TabBar from '../../../components/TabBar.vue'
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		watch:{
			
			current(newLength, oldLength){
				this.pageSize = 10
				this.weizhi=this.scrollTop
				this.$nextTick(() => {
					this.weizhi = 0
					// this.weizhi3 = 0
					this.getCoollist()
					this.getMedal()
				});
				console.log(1100);
			}
		},
		computed: { //加载数据过程loading
			...mapState(["isLoading"])
		},
		components: {
			BackPage,
			TabBar
		},
		filters: {
			// 时间戳处理
			formatDate: function(value, spe = '/') {
				value = value * 1000
				let data = new Date(value);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month >= 10 ? month : "0" + month;
				day = day >= 10 ? day : "0" + day;
				h = h >= 10 ? h : "0" + h;
				mm = mm >= 10 ? mm : "0" + mm;
				s = s >= 10 ? s : "0" + s;
				return `${year}${spe}${month}${spe}${day}`;
			}
		},
		onLoad() {
			// this.getCoollist()
			// this.getAllList()
			this.getShowList()
			this.getMedal()
		},
		// 在对应的show和hide页面生命周期中打开或关闭监听  
		onShow() {
			this.closeTC()
			this.changeiconmy()
			this.enable = true
			this.getUser()

			this.getxzlist()
			this.sjxz()

			this.getcoolKa()

		},
		created() {
			this.getUser()
			this.sjxz()
		},
		onHide() {
			//页面销毁时，取消监听  
			this.enable = false
			// this.closemackNum()
		},
		data() {
			return {
				tcdenglu: false,
				imgURL: 'http://113.31.109.223:8000/file/file/download?fileId=',
				pageNum: 1,
				pageSize: 10,
				pageNum1: 1,
				pageSize1: 10,
				showToken: false,
				// 是否开启吸顶功能  
				enable: true,
				xunzhang: {
					name: '未知',
					name1: '未知',
					name2: '未知',
					name3: '未知'
				},

				level: '', //勋章等级
				avatar: '', //头像
				cool_shell: '',
				username: '',
				listAll: [], //所有数据
				showList: [], //可视区域显示的数据				
				itemHeight: 105, //每条数据所占高度
				showNum: 6, //每次加载到可视区域的数量，itemHeight X showNum 要可视区域高度 ，否则页面滚动不了。
				top: 0, //偏移量
				scrollTop: 0, //卷起的高度
				startIndex: 0, //可视区域第一条数据的索引
				endIndex: 0, //可视区域最后一条数据后面那条数据的的索引，因为后面要用slice(start,end)方法取需要的数据，但是slice规定end对应数据不包含在里面	
				mobile: '',
				barStyle: {
					// width:'100rpx'
					// padding:'0px 10px !important'
				},
				current: 0,
				Coollist: [], //cool贝记录
				medielist: [], //勋章记录
				xzlist: [{
						color: 'rgb(164,133,237)',
						color1: 'rgb(245,106,158)',
						bgcolor: 'rgb(254,107,160)',
						name: '平勋章',
						text: '升级消耗80',
						zs: 'Cool贝获得',
						time: '2022/01/06'
					},
					{
						color: 'rgb(254,201,140)',
						color1: 'rgb(164,133,237)',
						bgcolor: 'rgb(164,133,237)',
						name: '治勋章',
						text: '升级消耗50',
						zs: 'Cool贝获得',
						time: '2022/01/06'
					},
					{
						color: 'rgb(200,133,255)',
						color1: 'rgb(164,133,237)',
						bgcolor: 'rgb(254,201,140)',
						name: '齐勋章',
						text: '升级消耗530',
						zs: 'Cool贝获得',
						time: '2022/01/06'
					},
					{
						color: 'rgb(200,133,255)',
						color1: 'rgb(164,133,237)',
						bgcolor: 'rgb(200,133,255)',
						name: '修勋章',
						text: '升级消耗10',
						zs: 'Cool贝获得',
						time: '2022/01/06'
					},
					// {
					// 	color: 'rgb(164,133,237)',
					// 	bgcolor: 'rgb(42,130,228)',
					// 	name: '修勋章',
					// 	text: '升级消耗50个',
					// 	zs: 'Cool贝获得',
					// 	time: '2022/01/06'
					// },
				],
				weizhi:0,
				jllist: [{
					state: '+',
					statecolor: 'rgb(172,51,193)',
					color: 'rgb(251,127,243)'
				}, {
					state: '-',
					statecolor: 'rgb(148,113,254)',
					color: 'rgb(172,51,193)'
				}],
				xzlistone: [],
				fdFlag: null,
				jsxzlist: [],
				coolkalist: [],
				weizhi3:0,
				list: [{
						name: 'Cool贝卡'
					},
					{
						name: '勋章'
					},
					{
						name: 'Cool贝记录'
					},
					{
						name: '勋章记录'
					}
				],
			}
		},


		methods: {
			closeAny() {
				this.showToken = false
				this.tcdenglu = false
				this.closeTC4()
			},
			falsetc() {
				this.tcdenglu = false

			},
			truetc() {

				this.tcdenglu = false
				this.tclogin()
				this.cleartoken()
			},
			zzTclogin() {
				this.tcdenglu = true
			},
			tclogin() {
				uniRequest.post('user/user/logout', {}).then((res) => {
					console.log(res);

				}).catch((err) => {
					console.log(err);
				});
			},
			getcoolKa() {
				uniRequest.post('nft/nft/list?is_self=true', {
					"pageNum": 1,
					"pageSize": 10,
					"sortField": "create_time",
					"sortOrder": "desc",
					"search": {
						"nft_type": 2
					}
				}).then((res) => {
					console.log(res);
					this.coolkalist = res.data.data.data
				}).catch((err) => {
					console.log(err);
				});
			},
			forxh() {
				this.xzlistone.forEach((item, index) => {
					this.jsxzlist.forEach((item1, index1) => {
						if (item.base_nft_id == item1.base_nft_id) {
							item.pd = 1
							console.log(this.xzlistone);
						}


					})

				})

			},
			sjxz() {
				uniRequest.post('basemedalupgrade/basemedalupgrade/list', {
					"pageNum": 1,
					"pageSize": 10,
					"sortField": "level",
					"sortOrder": "asc"
				}).then((res) => {
					console.log(res);
					this.xzlistone = res.data.data.data
					this.forxh()
				}).catch((err) => {
					console.log(err);
				});
			},
			getxzlist() {
				uniRequest.post('nft/nft/list?is_self=true', {
					"pageNum": 1,
					"pageSize": 10,
					"sortField": "create_time",
					"sortOrder": "desc",
					"search": {
						"nft_type": 1
					}
				}).then((res) => {
					console.log(res);
					this.jsxzlist = res.data.data.data
				}).catch((err) => {
					console.log(err);
				});
			},
			cleartoken() {
				this.showToken = false
				// uni.clearStorage();
				uni.removeStorage({ //删除Storage
					key: 'vuex',
				})
				uni.removeStorage({ //删除Storage
					key: 'token',
				})
				uni.removeStorage({ //删除Storage
					key: 'HeroicGramtoken',
				})
				uni.removeStorage({ //删除Storage
					key: 'shuaxin',
				})
				uni.removeStorage({ //删除Storage
					key: 'level',
				})
				this.$router.go(0)
			},
			Binding() {
				alert('暂未开放');
				return;
				console.log(this.mobile);
				if (this.mobile == '') {
					uni.navigateTo({
						url: "/pages/Mypage/PhoneBinding/PhoneBinding",
					});
				} else {
					location.href = 'http://envicool_addm.81keji.com/'

				}
			},
			CoolCard() {
				// console.log('aa');
				this.$router.push("/pages/Mypage/Exchange/Exchange")

				// uni.navigateTo({
				// 	url: "/pages/Mypage/Exchange/Exchange",
				// });
			},
			getMedal() {
				uniRequest.post('coolshellflow/coolshellflow/list?is_self=true', {
					"pageNum": this.pageNum1,
					"pageSize": this.pageSize1,
					"search": {
						"const_type": 102
					}
				}).then((res) => {
					console.log("勋章");
					this.medielist = res.data.data.data
					this.xunzhang.name = res.data.data.data[0].nft.name
					this.xunzhang.name1 = res.data.data.data[1].nft.name
					this.xunzhang.name2 = res.data.data.data[2].nft.name
					this.xunzhang.name3 = res.data.data.data[3].nft.name
					console.log(res);
				}).catch((err) => {
					console.log(err);
				});
			},
			getCoollist() {
				uniRequest.post('coolshellflow/coolshellflow/list?is_self=true', {
					"pageNum": this.pageNum,
					"pageSize": this.pageSize,
					"sortField": "create_time",
					"sortOrder": "desc",
					"search": {}
				}).then((res) => {
					console.log(res);
					this.Coollist = res.data.data.data
				}).catch((err) => {
					console.log(err);
				});
			},
			getUser() {

				uniRequest.post('user/user/query').then((res) => {
					console.log(res);
					if (res.data.code == "1002") {
						this.showToken = true
					}
					this.username = res.data.data.username
					this.avatar = res.data.data.avatar
					this.cool_shell = res.data.data.cool_shell
					this.level = res.data.data.level
					this.mobile = res.data.data.mobile
					uni.setStorageSync('level', res.data.data.level)
					// console.log(uni.getStorageSync('level'));
				}).catch((err) => {
					console.log(err);
				});
			},
			...mapMutations(['closeTC','closemackNum', 'openTC4', 'closeTC4', 'changeiconmy']),
			// 兑换跳转
			DuiHan() {
				// console.log('bb');
				this.$router.push("/pages/Mypage/ExchangeCool/ExchangeCool")
				// uni.navigateTo({
				// 	url: "/pages/Mypage/ExchangeCool/ExchangeCool",
				// 	// success: res => {},
				// 	// fail: () => {},
				// 	// complete: () => {}
				// });
			},
			//构造2万条数据
			// getAllList() {
			// 	for (let i = 0; i < 20000; i++) {
			// 		this.listAll.push(`我是第${i}号佳丽`)
			// 	}
			// },

			//计算可视区域数据
			getShowList() {
				this.startIndex = Math.floor(this.scrollTop / this.itemHeight); //可视区域第一条数据的索引
				this.endIndex = this.startIndex + this.showNum; //可视区域最后一条数据的后面那条数据的索引

				this.showList = this.listAll.slice(this.startIndex, this
					.endIndex) //可视区域显示的数据，即最后要渲染的数据。实际的数据索引是从this.startIndex到this.endIndex-1

				this.top = this.scrollTop - (this.scrollTop % this
					.itemHeight); //在这需要获得一个可以被itemHeight整除的数来作为item的偏移量，这样随机滑动时第一条数据都是完整显示的
			},
			xlshi(){
				console.log(66);
			},
			pageSizeo(){
				this.pageSize=this.pageSize+10
				this.getCoollist()
			},
			pageSizeo1(){
				this.pageSize1=this.pageSize1+10
				this.getMedal()
			},
			//区域滚动事件
			scrollEvent(e) {
				this.scrollTop = e.detail.scrollTop
				console.log(this.scrollTop);
				// this.scrollTop = e.detail.scrollTop
				// let aa = this.scrollTop.toFixed(0)
				// let bb = aa.split('')
				// console.log(bb);
				// console.log(aa);
				// this.fd(bb)
			},
			fd(bb) {
							let that = this
							clearTimeout(this.fdFlag)
							this.fdFlag = setTimeout(() => {
								
								that.fdFlag = null
							}, 100)
							// 在此时间段触发几次事件，就延迟触发几次，并只触发最后一次事件。
						},
			
			sectionChange(index) {
				console.log(index);
				this.current = index;
				
					
					
				
				// console.log(this.current);

			},
		}
	}
</script>

<style lang="scss" scoped>
	@-webkit-keyframes tdtc {
		0% {
			transform: scale(0.8); 
			// transform: scale(0.8);  
			opacity: 0.5;  
		}
	// 50% {
	// 	transform: scale(1);  
	// 	// opacity: 0.5;  
	// }
	45%{
		transform: scale(1);
		opacity: 1; 
	}
		// 90% {
		// 	transform: scale(1);
		// 	opacity: 1; 
		// }
		100% {
			transform: scale(1);
			opacity: 1; 
		}
	}
	.TC {
		animation-name:tdtc;
		animation-duration:0.9s;
		transform-origin:350rpx 500rpx;
		animation-timing-function:cubic-bezier(0.01, 1.24, 0.08, 1.36);
		animation-iteration-count:1;
		animation-play-state: running;
		.toptext {
			position: absolute;
			// top: -8%;
			top: 100rpx;
			left: 35%;
			z-index: 999;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.text-a {

				font-size: 46rpx;
			}

			.text-b {
				color: rgb(148, 113, 254);
				font-size: 32rpx;
			}
		}

		height: 100%;
		background-color: rgb(255, 255, 255);

		// background: linear-gradient(#7a52c0, #d7d7d7) no-repeat;
		.title {
			text-align: center;
			line-height: 100rpx;
			font-size: 60rpx;
			color: rgb(164, 133, 237);
		}

		.box {
			z-index: 99;
			background-color: #fff;

			.box1 {

				// margin-top: 20rpx;
				.box1-a {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 300px;
					align-items: center;

					image {
						margin-top: -60rpx;
						width: 459rpx;
						height: 319rpx;
					}
				}
			}

			.send {
				position: absolute;
				right: 52rpx;

				uni-button {
					border-radius: 100rpx;
					height: 92rpx;
					line-height: 92rpx;
					color: #fff;
					width: 144rpx;
					background: rgb(121, 72, 234);
					font-size: 28rpx;
				}
			}

			.box2-a {
				width: 94%;
				height: 16px;
				background-color: #fffefe7d;
				box-shadow: 0px 5px 50px #9e9e9e3b;
				border-radius: 0rem 0rem 10px 10px;
				/* opacity: 0.4; */
				position: absolute;
				left: 3%;
				bottom: -16px;
				// /* z-index: -1;
			}

			.u-input--border[data-v-fdbb9fe6] {
				border-radius: 100rpx;
				height: 96rpx;
				box-sizing: border-box;
				padding-top: 8rpx !important;
				margin-left: 10rpx;
			}

			.username {
				font-size: 18px;
				display: flex;
				align-items: center;

				image {
					width: 16px;
					height: 16px;
					margin-right: 4px;
				}
			}

			.password {
				font-size: 18px;
				display: flex;
				align-items: center;
				margin-top: 30px;

				image {
					width: 16px;
					margin-right: 4px;
					height: 16px;
				}
			}

			.sms {
				display: flex;
				justify-content: end;
				color: rgb(164, 133, 237);
				padding: 10% 0;
				padding-bottom: 12%;
				margin-right: 36rpx;
			}

			z-index: 99;
			background-color: #fff;
			box-sizing: border-box;
			padding: 48rpx;
			box-shadow: 0px 10rpx 100rpx #9e9e9e80;
			position: absolute;
			background: #fff;
			width: 86%;
			height: 966rpx;
			border-radius: 2%;
			top: 188rpx;
			left: 7%;

			.btnA {

				width: 74%;
				margin: 0px auto;
				// margin-top: 40%;
				margin-top: -28px;

				uni-button {
					border-radius: 64rpx;
					background: linear-gradient(to right, #A272FC, #DE62D2);
				}
			}

			.btnB {
				width: 60%;

				uni-button {
					margin-top: 20rpx;
					border-radius: 32px;
					color: #7a52c0;
				}

				margin: 0px auto;
			}
		}
	}


	uni-page-body {
		background-color: #F7F5FB;

		height: 100%;
	}

	.mack-a {
		height: calc(100vh);
	}

	.stall {
		.item {
			height: 105px;
			// padding: 5px;
			color: #666;
			box-sizing: border-box;

		}

		.scroll-box {
			height: 300px;
			width: 100%;
			position: relative;
			// border: 1px solid red;
			// margin-top: 10rpx;
			box-sizing: border-box;
			// padding-left: 28rpx;
			height: calc(55vh);

			// display: flex;
			.uni-scroll-view-content {
				width: 100%;
				display: flex;
				justify-content: space-around;
				height: 100%;
			}
		}

		// .fixed{
		// 	position: fixed;
		// 	top: ;
		// }
		// background-color: #fff;

		.list1 {
			display: flex;
			flex-direction: column;
			align-items: center;


			.jllist1 {
				box-shadow: 1px 5rpx 50rpx #9e9e9e36;
				display: flex;
				background-color: #fff;
				height: 124rpx;
				justify-content: center;
				width: 94%;
				border-radius: 6px;
				margin: 16rpx 0px;

				.jl-lf {
					display: flex;
					align-items: center;
					// width: 208rpx;

					.lf {
						width: 164rpx;
						border-radius: 12rpx;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.jl-ri {
					.fs18 {
						font-size: 36rpx;
						width: 298rpx;
						text-align: center;
					}

					.fs15 {
						font-size: 32rpx;
					}

					display: flex;
					align-items: center;
					justify-content: space-between;
					// width: 468rpx;
					margin-right: 20rpx;

				}

				image {
					width: 64rpx;
					height: 65rpx;
					margin-left: 36rpx;
				}
			}

			.jllist {
				box-shadow: 1px 5rpx 50rpx #9e9e9e36;
				display: flex;
				background-color: #fff;
				height: 148rpx;
				justify-content: center;
				width: 94%;
				border-radius: 6px;
				margin: 20rpx;

				.jl-lf {
					display: flex;
					align-items: center;
					// width: 208rpx;

					.lf {
						width: 164rpx;
						border-radius: 12rpx;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.jl-ri {
					.fs18 {
						font-size: 32rpx;
						width: 298rpx;
						text-align: center;
					}

					.fs15 {
						font-size: 32rpx;
					}

					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 468rpx;
					margin-right: 20rpx;

				}

				image {
					width: 64rpx;
					height: 65rpx;
					margin-left: 36rpx;
				}
			}
		}

		.list {
			.grid {

				.text {
					background: #7948ea;
					border-radius: 10rpx;
					text-align: center;
					color: #fff;
					margin-top: 160rpx;
					margin-left: 20rpx;
					font-size: 40rpx;
					height: 58rpx;
					opacity: 0.8;
					padding:0 10rpx 0 10rpx;
				}

				.gridchild3 {
					display: flex;
					justify-content: flex-start;
					width: 254rpx;
					height: 235rpx;
					background-image: url('@/static/icon/icon4/4.png');
					background-position: 100%;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					opacity: 0.4;
					// background-color: #9e9e9e80;	
					// image{
					// 	width: 254rpx;
					// 	height: 253rpx;
					// }
				}

				.gridchild2 {
					display: flex;
					justify-content: flex-start;
					width: 258rpx;
					height: 235rpx;
					background-image: url('@/static/icon/icon4/3.png');
					background-position: 100%;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					margin-right: 6rpx;
					opacity: 0.4;
					// background-color: #9e9e9e80;	
					// image{
					// 	width: 254rpx;
					// 	height: 253rpx;
					// }
				}

				.gridchild1 {
					display: flex;
					justify-content: flex-start;
					width: 250rpx;
					height: 228rpx;
					background-image: url('@/static/icon/icon4/2.png');
					background-position: 100%;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					opacity: 0.4;
					// background-color: #9e9e9e80;	
					// image{
					// 	width: 254rpx;
					// 	height: 253rpx;
					// }
				}

				.gridchild0 {
					display: flex;
					justify-content: flex-start;
					width: 258rpx;
					height: 227rpx;
					background-image: url('@/static/icon/icon4/1.png');
					background-position: 100%;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					margin-right: 6rpx;
					opacity: 0.4;
					// background-color: #9e9e9e80;	
					// image{
					// 	width: 254rpx;
					// 	height: 253rpx;
					// }
				}

				border-radius: 24px;
				box-shadow: 0px 5px 50px #9e9e9e80;
				background-color: #fff;
				box-sizing: border-box;
				padding: 20rpx;
				margin: 0px auto;
				align-items: center;
				flex-wrap: wrap;
				width: 78%;
				display: flex;
				justify-content: space-evenly;
				/* align-items: center; */
				// height: 456rpx;
				height: 524rpx;
				// height: 90rpx;
				margin-top: 32rpx;
				margin-bottom: 12rpx
			}

			display: flex;
			// justify-content: center;
			flex-direction: column;
			align-items: center;
			// background: #fff;
			// background-color: #fff;
			height: calc(56.8vh);
			// height: ;
			width: 100%;
			// height: 100%;

			.xzlist {
				width: 100%;
				height: calc(55vh);
				background-position: 57% 100%;
				background-size: 113% 111%;
				background-image: url('@/static/icon/icon5/8.png');
			}

			.btnA {

				width: 45%;
				margin: 0px auto;
				// margin-top: 40%;
				margin-top: 20rpx;

				uni-button {
					border-radius: 64rpx;
					font-size: 32rpx;
					background: linear-gradient(to right, #A272FC, #DE62D2);
				}
			}

			.listImg {

				// background-color: #fff;
				// background-color: #A272FC;	
				image {

					// margin: 10rpx;
					margin-top: 30rpx;
				}
			}
		}

		.tabs {
			box-sizing: border-box;
			padding-left: 6%;
			background: #fff;
			padding-bottom: 8rpx;

			// background-color: ;
			.wrapper {
				background: #fff;
				// width: 100%;
				box-sizing: border-box;

				// padding: 0px 20rpx;
				::v-deep .u-sticky {
					height: 100rpx;
					// width: 200rpx;
					// display: flex;
					// justify-content: center;
					// align-items: center;
				}

				::v-deep .u-tabs__wrapper__nav__item {
					padding: 0 32rpx;
				}
			}
		}

		.nav {
			background-color: #fff;
			display: flex;
			justify-content: space-evenly;
			// background-image: url('@/static/icon/icon1/分组 10.png');
			background-position: 100%;
			background-size: 100%;
			background-repeat: no-repeat;
			height: 120rpx;
			align-items: center;

			.n-a {
				background: rgb(121, 72, 234);
				color: #fff;
				border-radius: 24rpx;
				font-size: 24rpx;
				width: 174rpx;
				text-align: center;
				height: 38rpx;
				line-height: 38rpx;
				margin-right: 40rpx;
				margin-left: 40rpx;
			}

			.n-b {
				border-radius: 64rpx;
				background: linear-gradient(to right, #A272FC, #DE62D2);
				color: #fff;
				width: 168rpx;
				text-align: center;
				font-size: 24rpx;
				height: 38rpx;
				line-height: 38rpx;
				margin-right: 40rpx;
			}

			// background-color: #fff;
			// margin: 10px 16px 2px 16px;

			// .nav-a {
			// 	display: flex;
			// 	flex-direction: column;
			// 	justify-content: center;
			// 	align-items: center;
			// }

			// .im1 {
			// 	width: 82rpx;
			// 	height: 80rpx;
			// 	margin: 4px 0px;
			// }

			// .im2 {
			// 	width: 82rpx;
			// 	height: 80rpx;
			// 	margin: 4px 0px;
			// }

			// .im3 {
			// 	width: 82rpx;
			// 	height: 80rpx;
			// 	margin: 4px 0px;
			// }

			// .im4 {
			// 	width: 82rpx;
			// 	height: 80rpx;
			// 	margin: 4px 0px;
			// }
		}

		.myInfo {
			// margin-top: 20rpx;
			box-sizing: border-box;
			padding-top: 60rpx;
			background-image: url('../../../static/icon/purback.png');
			background-position: 100%;
			background-repeat: no-repeat;
			height: 300rpx;
			background-size: 100% 100%;
			display: flex;
			// justify-content: flex-start;
			padding-left: 160rpx;
			align-items: center;

			.inFrom {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				height: 128rpx;

				.fr-b {
					display: flex;
					justify-content: space-between;
					width: 428rpx;
				}

				.qian1 {
					display: flex;
					align-items: center;

					image {
						margin-right: 10rpx;
						width: 22rpx;
						height: 22rpx;
					}
				}

				.qian {
					display: flex;
					align-items: center;

					image {
						margin-right: 10rpx;
						width: 20rpx;
						height: 20rpx;
					}
				}

				.xc {
					width: 104rpx;
					height: 28rpx;
					justify-content: space-evenly;
					align-items: center;
					display: flex;
					// box-sizing: border-box;
					// padding: 0px 10px;
					border-radius: 64rpx;
					background: linear-gradient(to right, #A272FC, #DE62D2);
				}

				color: #f4f0fe;

				.fr-b {
					display: flex;
				}

				.fs14 {
					padding: 0px 20rpx;
					box-sizing: border-box;
					text-align: center;
					font-size: 30rpx;
					// line-height:46rpx
					border-radius: 40rpx;
					// width: 140rpx;
					background: linear-gradient(to right, #A272FC, #DE62D2);
				}

				.fs12 {
					// text-align: center;
					font-size: 12px;
					// line-height:46rpx
				}
			}

			.inImg {
				image {
					width: 144rpx;
					height: 144rpx;
					margin-left: 56rpx;
					margin-right: 24rpx;
				}
			}
		}
	}
</style>
